<template>
  <el-popover placement="top-start" :width="320" trigger="click" v-model:visible="visible">
    <template #reference>
      <img src="/public/switch-user.png" alt />
    </template>
    <div class="header">
      <el-alert title="指派给" type="success" show-icon :closable="false"></el-alert>
    </div>
    <div class="body">
      <el-table :data="candidates" style="width: 100%" size="mini" max-height="250">
        <el-table-column prop="name" label="客服"></el-table-column>
        <el-table-column label="操作" align="right">
          <template #header>
            <el-input v-model="keyword" size="mini" placeholder="搜索" prefix-icon="el-icon-search" />
          </template>
          <template #default="scope">
            <el-button type="text" size="small" @click="assign(scope.row.id)">指派</el-button>
            <el-button type="text" size="small" @click="assignAll">指派全部</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-popover>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getAllUser } from '../../api/user'
import { reactive, toRefs, computed, watchEffect } from "vue"

const props = defineProps({
  from_uid: {
    required: true,
  }
})

const emit = defineEmits(['assignAll', 'assign'])

const state = reactive({
  users: [],
  candidates: [],
  keyword: '',
  visible: false,
})

watchEffect(() => {
  if (state.keyword) {
    state.candidates = state.users.filter(user => user.name.includes(state.keyword))
  } else {
    state.candidates = state.users
  }
})

const assign = (user_id) => {
  emit('assign', user_id)
  state.visible = false
}

const assignAll = (user_id) => {
  emit('assignAll', props.from_uid, user_id)
  state.visible = false
}

getAllUser().then(result => {
  state.users = result.data
})

const { candidates, keyword, visible } = toRefs(state)

</script>

<style scoped>
.radio-wrap {
  margin-bottom: 5px;
}

.radio-group-box {
  max-height: 200px;
  overflow: auto;
  margin-top: 5px;
}

.radio-group-box::-webkit-scrollbar {
  display: none;
}

.header {
  height: 30px;
  font-size: 16px;
  margin-bottom: 15px;
}

.footer {
  text-align: right;
}
</style>